<template>
    <div style="text-align:center;">

        <div class="demo-input-suffix">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>

        <div class="demo-input-suffix">
            属性方式：
            <el-input
                    placeholder="请选择日期"
                    suffix-icon="el-icon-date"
                    v-model="input1">
            </el-input>
            <el-input
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="input2">
            </el-input>
        </div>
        <div class="demo-input-suffix">
            slot 方式：
            <el-input
                    placeholder="请选择日期"
                    v-model="input3">
                <i slot="suffix" class="el-input__icon el-icon-date"></i>
            </el-input>
            <el-input
                    placeholder="请输入内容"
                    v-model="input4">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>

        <div class="demo-input-suffix">
            <el-input
                    type="textarea"
                    :rows="2"
                    maxlength="80"
                    :show-word-limit=true
                    autocomplete="on"
                    resize="vertical"
                    autofocus="true"
                    @blur="onBlur"
                    placeholder="请输入内容"
                    placement="top-start"
                    fetch-suggestions="{}"
                    v-model="textarea">
            </el-input>
        </div>

        <div class="demo-input-suffix">
            <el-autocomplete
                    v-model="state"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入内容"
                    @select="handleSelect"
                    :trigger-on-focus=true
            ></el-autocomplete>
        </div>


    </div>

</template>

<script>
    export default {
        name: "index.vue",
        data() {
            return {
                input: '',
                input1: '',
                input2: '',
                input3: '',
                input4: '',
                textarea: '',
                restaurants: [],
                state: '',
                timeout: null
            }
        },
        methods: {
            onBlur(event) {
                console.log(event)
            },
            loadAll() {
                return [
                    {"value": "广西（北新泾店）", "address": "长宁区新渔路144号"},
                    {"value": "顺德（北新泾店）", "address": "长宁区新渔路144号"},
                    {"value": "佛山（北新泾店）", "address": "长宁区新渔路144号"},
                    {"value": "广东（北新泾店）", "address": "长宁区新渔路144号"},
                    {"value": "广州（北新泾店）", "address": "长宁区新渔路144号"},
                    {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"}
                ];
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 100 * Math.random());
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            }
        }
        , mounted() {
            this.restaurants = this.loadAll();
        }
    }

</script>

<style>
    .demo-input-suffix {
        margin-top: 20px;
        padding: 10px;
    }

    .el-input {
        margin-top: 10px;
        line-height: 50px;
    }

    .el-input__inner {
        height: 60px;
    }

    .el-autocomplete {
        position: relative;
        display: inline-block;
        width: 100%;
    }
</style>